<!-- /src/components/CloudComputeModal.vue -->
<script setup lang="ts">
import { onMounted, onUnmounted, watch } from 'vue'
import { useStore } from '@/stores/data'

const store = useStore()

// 打开时禁止滚动
const lockBody = () => { document.body.style.overflow = 'hidden' }
const unlockBody = () => { document.body.style.overflow = '' }

watch(() => store.visible, v => (v ? lockBody() : unlockBody()))
onMounted(() => { if (store.visible) lockBody() })
onUnmounted(unlockBody)

const onOverlayClick = () => store.close()
const onContentClick = (e: MouseEvent) => e.stopPropagation()

const onPrimary = async () => {
    
    store.createInstances(store.userInfo.licenseKey, store.userInfo.license_name)
    if(store.loading) onOverlayClick()

} // 是否关闭由回调自行决定
</script>

<template>
  <teleport to="body">
    <div
      v-if="store.visible"
      class="cloud-modal__overlay"
      @click="onOverlayClick"
    >
      <div class="cloud-modal__panel" @click="onContentClick">
        <!-- 顶部图与关闭 X -->
        <div class="cloud-modal__closeX" @click="store.close()" />

        <div class="cloud-modal__img">
          <img src="@/assets/images/config/image.png" alt="" />
        </div>

        <div class="cloud-modal__tag">提示</div>

        <!-- 根据类型切换文案/按钮 -->
        <template v-if="!store.runningData">
          <div class="cloud-modal__title">
            需开启 <span class="primary">云电脑</span>
          </div>
          <div class="cloud-modal__subtitle">该功能通过云端进行AI计算</div>
          <div class="cloud-modal__card">
            云电脑开启将自动消耗算力值；开启过程默认后台开机，其它操作不影响云电脑开机。
          </div>
          <button class="cloud-modal__btn" :disabled="store.loading" @click="onPrimary">
            {{ store.loading ? '开机中…' : '开启云电脑' }}
          </button>
        </template>

        <template v-else>
          <div class="cloud-modal__title">
            {{store.loading ? "正在开启" : "成功开启"}} <span class="primary">云电脑</span>
          </div>
          <div class="cloud-modal__subtitle" style="margin-bottom: 36px;">
            快去开启你的直播之旅吧～
          </div>
          <!-- <button class="cloud-modal__btn" :disabled="store.loading" @click="onPrimary">
            {{ store.loading ? '开机中…' : '关闭云电脑' }}
          </button> -->
          <button class="cloud-modal__btn" :disabled="store.loading" @click="store.stopInstance(store.runningData.key ,store.runningData.uhostId)">
            关闭云电脑
          </button>
        </template>
      </div>
    </div>
  </teleport>
</template>

<style scoped lang="scss">
.cloud-modal__overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0.5);
  animation: fadeIn .2s ease;
}
.cloud-modal__panel {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg,#FFFFFF 0%,#E6F3FD 25%,#E7E8FE 100%);
  border-radius: 20px 20px 0 0;
  padding: 36px 31px; box-sizing: border-box;
  animation: slideUp .28s cubic-bezier(.25,.46,.45,.94);
}
.cloud-modal__closeX{
  position: absolute; right: 18px; top: -63px; z-index: 1;
  width: 33px; height: 33px; cursor: pointer;
  background: url(@/assets/images/x.png) no-repeat center/100% 100%;
}
.cloud-modal__img {
  position: absolute; right: 0; top: -87px; width: 263px; height: 263px;
  img{ width:100%; height:100%; display:block; }
}
.cloud-modal__tag {
  width: 49px; height: 24px; line-height: 24px; text-align: center;
  background: #198EFF; color: #fff; border-radius: 7px 0 7px 0; font-weight: 500;
  margin-bottom: 9px; font-size: 13px;
}
.cloud-modal__title {
  font-size: 20px; color: #00042D; font-weight: 600; display: flex; gap: 6px; align-items: center;
  margin-bottom: 2px;
  .primary{ color:#006CFF; }
}
.cloud-modal__subtitle {
  font-size: 16px; color:#595959; margin-bottom: 16px;
}
.cloud-modal__card {
  width: 368px; max-width: calc(100% - 2px);
  height: 96px; color:#2192FF; font-size: 16px; line-height: 24px;
  background: url(@/assets/images/config/computerpopupbg.png) no-repeat center/100% 100%;
  border-radius: 8px; padding: 27px 15px 9px; box-sizing: border-box; margin-bottom: 36px;
}
.cloud-modal__btn {
  width: 100%; height: 50px; border-radius: 47px; border: none; cursor: pointer;
  background: linear-gradient(270deg,#006CFF 0%,#009FFF 100%); color:#fff; font-size: 16px; font-weight: 500;
  transition: transform .15s ease, box-shadow .15s ease;
  &:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.08); }
  &:active{ transform: translateY(0); box-shadow: none; }
  &:disabled{ opacity:.7; cursor: default; }
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{ transform: translateY(100%) scale(.98); opacity:0 } to{ transform: translateY(0) scale(1); opacity:1 } }
</style>
